<template>
  <div>
    <el-select v-model="role"
               @change="getPermissionList"
               placeholder="请选择">
      <el-option v-for="item in roleList"
                 :key="item.id"
                 :label="item.name"
                 :value="item.id">
      </el-option>
    </el-select>
    <!-- 添加按钮 -->
    <el-button type="primary"
               icon="el-icon-plus"
               style="margin: 10px 0"
               @click="addRole">添加</el-button>
    <!-- 品牌表格 -->
    <!-- 
    data  显示的数据
    prop	对应列内容的字段名，也可以使用 property 属性
    type:index 通过给 type=index 的列传入 index 属性，可以自定义索引  
    slot-scope  用于给插槽定义作用域
    label   显示的标题
   -->
    <el-table style="width: 100%"
              border
              :data="viewlist">
      <el-table-column prop="id"
                       width="80px"
                       label="序号"
                       align="center">
      </el-table-column>
      <el-table-column prop="name"
                       label="角色名称"></el-table-column>
      <el-table-column prop="prop"
                       label="操作">
        <template slot-scope="{ row, $index }">
          <el-button type="warning"
                     icon="el-icon-edit"
                     @click="updateRole(row)">修改</el-button>
          <el-button type="primary"
                     icon="el-icon-delete"
                     @click="deleteRole(row)"> 删除</el-button>

        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <!-- 
    layout 组件布局，子组件名用逗号分隔
    current-page	当前页数，支持 .sync 修饰符
    page-sizes	每页显示个数选择器的选项设置
    page-size	每页显示条目个数，支持 .sync 修饰符
    total	总条目数
   -->
    <el-pagination style="margin-top: 20px; text-align: center"
                   layout="prev, pager, next, jumper, ->,sizes,total"
                   :current-page="page"
                   :page-size="limit"
                   @size-change="getPageList"
                   @current-change="getPageList"
                   :page-sizes="[3, 5, 10]"
                   :total="total">
    </el-pagination>
    <!-- 添加角色对话框 -->
    <el-dialog :title="tmForm.id ? '修改权限' : '添加权限'"
               :visible.sync="dialogVisible"
               width="50%">
      <!-- 品牌名称 -->
      <el-form style="width: 100%"
               :model="tmForm"
               ref="ruleform">
        <el-form-item label="权限名"
                      label-width="80px"
                      prop="name">
          <el-input v-model="tmForm.name"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary"
                   @click="AddOrUpdateRole">添 加</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'Permission',

  data () {
    return {
      roleList: [],
      // 分页器当前页数
      page: 1,
      // 当前页数展示条目
      limit: 10,
      // 总共数据条数
      total: 0,
      viewlist: [],
      // 是否显示对话框
      dialogVisible: false,
      // 对话框数据
      tmForm: {
        name: "",
      },
      role: '',
      permissionList: [],
    };
  },

  created () {
    this.getRoleList()
  },

  methods: {
    async getPermissionList () {
      console.log(11);

      const res = await this.$API.permission.getPermission(this.role)
      console.log('permission', res);
      if (res.status == 200) {
        this.permissionList = res.data
        this.total = res.data.length
        let cnum = (this.page - 1) * this.permissionList.length
        this.viewlist = this.permissionList.slice(cnum, this.limit + cnum)
      }
    },
    getPageList (pager = 1) {
      this.page = pager
      let cnum = (this.page - 1) * this.permissionList.length
      this.viewlist = this.permissionList.slice(cnum, this.limit + cnum)
    },
    // 修改角色权限
    updateRole (row) {
      this.dialogVisible = true
      this.tmForm = row
    },
    // 添加角色
    addRole () {
      this.tmForm = {}
      this.dialogVisible = true
    },
    // 修改增加
    async AddOrUpdateRole () {
      // 修改
      if (this.tmForm.id) {
        console.log('rolelist', this.$qs.stringify(this.tmForm));
        const res = await this.$API.permission.updatePermission(this.$qs.stringify(this.tmForm))
        console.log('addRole', res);
        if (res.status == 200) {
          this.$message.success(res.msg)
          this.dialogVisible = false
          this.getPermissionList()

        }
      } else {
        console.log('add');
        const res = await this.$API.permission.addPermission(this.$qs.stringify(this.tmForm))
        if (res.status == 200) {
          var mids = ''
          this.permissionList.forEach(item => {
            mids += item.id + ","
          })
          mids += res.data.id.toString()
          console.log(mids);
          let data = {
            'mids': mids
          }
          const resp = await this.$API.permission.setPermission(this.role, this.$qs.stringify(data))
          if (resp.status == 200) {
            this.$message.success(res.msg)
            this.dialogVisible = false
            this.getPermissionList()

          }
        }
      }
    },
    // 删除角色
    async deleteRole (row) {
      const res = await this.$API.permission.deletePermission( row.id )
      if (res.status == 200) {
        this.$message.success(res.msg)
        this.getPermissionList()
      }
    },
    async getRoleList () {
      const res = await this.$API.role.getRoleList()
      if (res.status == 200) {
        this.roleList = res.data
      }
    }
  },
};
</script>

<style scoped>
</style>